<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态文字AI JRPG</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;
    }
    /* Custom scrollbar for webkit browsers */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #2d3748; /* gray-800 */
    }
    ::-webkit-scrollbar-thumb {
      background: #4a5568; /* gray-600 */
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #718096; /* gray-500 */
    }

    /* Interactive Guide Styles */
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7), 0 0 0 9999px rgba(0,0,0,0.7); }
      50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0), 0 0 0 9999px rgba(0,0,0,0.7); }
    }
    .guide-highlight-pulse {
      animation: pulse 2s infinite;
      border: 2px solid #3b82f6; /* blue-500 */
    }
    .guide-popover::before {
      content: '';
      position: absolute;
      border-width: 8px;
      border-style: solid;
      border-color: transparent;
    }
    .guide-popover.pos-bottom::before {
      top: -16px; left: 50%;
      transform: translateX(-50%);
      border-bottom-color: #374151; /* gray-700 */
    }
    .guide-popover.pos-top::before {
      bottom: -16px; left: 50%;
      transform: translateX(-50%);
      border-top-color: #374151; /* gray-700 */
    }
    .guide-popover.pos-right::before {
      right: 100%; top: 50%;
      transform: translateY(-50%);
      border-right-color: #374151; /* gray-700 */
    }
    .guide-popover.pos-left::before {
      left: 100%; top: 50%;
      transform: translateY(-50%);
      border-left-color: #374151; /* gray-700 */
    }
  </style>
<script type="importmap">
{
  "imports": {
    "react/": "https://esm.sh/react@^19.1.0/",
    "react": "https://esm.sh/react@^19.1.0",
    "uuid": "https://esm.sh/uuid@^11.1.0",
    "react-dom/": "https://esm.sh/react-dom@^19.1.0/",
    "react-markdown": "https://esm.sh/react-markdown@^9.0.1",
    "remark-gfm": "https://esm.sh/remark-gfm@^4.0.0",
    "expr-eval": "https://esm.sh/expr-eval@^2.0.2",
    "json-schema": "https://aistudiocdn.com/json-schema@^0.4.0"
  }
}
</script>
<link rel="stylesheet" href="/index.css">
</head>
<body class="bg-gray-900 text-gray-100">
  <div id="root"></div>
  <script type="module" src="/index.tsx"></script>
</body>
</html>